<!--
 * @Author: wangkg wangkegui@longfor.com
 * @Date: 2024-05-07 17:50:06
 * @Description: 
-->
<template>
  <div :class="getAppLogoClass">
    <img :src="props.logo" />
    <div :class="getTitleClass" v-show="props.isShowTitle" :style="titleStyle">
      {{ props.title }}
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { getGlobalCls } from '@/utils/index';

const props = defineProps({
  /**
   * Whether to show title
   */
  logo: {
    type: String,
    default: ''
  },
  isShowTitle: {
    type: Boolean,
    default: true
  },
  titleStyle: {
    type: Object,
    default: () => {}
  },
  title: {
    type: String,
    default: ''
  }
});

const { prefixCls } = getGlobalCls('app-logo');

const getAppLogoClass = computed(() => [
  prefixCls,
  { 'collapsed-show-title': unref(props.isShowTitle) }
]);
const getTitleClass = computed(() => [`${prefixCls}__title`]);
</script>
<style lang="scss">
  $prefix-cls: #{config.$namespace}-app-logo;

.#{$prefix-cls} {
  display: flex;
  align-items: center;
  padding-left: 7px;
  transition: all 0.2s ease;
  cursor: pointer;

  &.collapsed-show-title {
    padding-left: 20px;
  }

  &__title {
    transition: all 0.5s;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: #0960bd;
    margin-left: 4px;
  }
}
</style>
